<template>
    <div class="image">
        <img src="https://img1.qunarzz.com/travel/d8/1708/b2/67dd30501f7748b5.jpg_r_1024x683x95_33aad048.jpg" alt="">
    </div>
    <div class="scenery">
        <div class="scenery-introduce">
            <div class="scenery-title">
                <p>凤凰古城</p>
                <p><van-icon name="star" color="#f5ec56"/>4.7</p>
            </div>
            <div class="scenery-detail">
                <ul>
                    <li>开园中</li>
                    <li>08:00-18:00开园 | 14:00停止入园</li>
                </ul>
                <ul>
                    <li>简介</li>
                    <li>凤凰古城位于湖南省湘西的西南部。古城建于清康熙时期，因沈从文的小说《边城》而闻名于世。</li>
                </ul>
                <ul>
                    <li>地址</li>
                    <li>湘西土家族苗族自治州凤凰县凤凰古城</li>
                </ul>
            </div>
        </div>
        <div class="scenery-tip">
            <ul>
                <li>小城气息</li>
                <li>依山傍水</li>
                <li>边城</li>
            </ul>
        </div>
        <div class="scenery-play">
            <div class="play-title">
                <p>游玩套餐</p>
            </div>
            <div class="play-plan">
                <div class="plan-left">
                    <ul>
                        <li>方案一</li>
                        <li>可订10月1日</li>
                        <li>不可退 <a href="#">购买须知>></a></li>
                    </ul>
                </div>
                <div class="plan-right">
                    <ul>
                        <li><del>￥119</del>98.9起</li>
                        <li>返50元酒店券</li>
                        <li><button>预定</button></li>
                    </ul>
                </div>
            </div>
            <div class="play-plan">
                <div class="plan-left">
                    <ul>
                        <li>方案一</li>
                        <li>可订10月1日</li>
                        <li>不可退 <a href="#">购买须知>></a></li>
                    </ul>
                </div>
                <div class="plan-right">
                    <ul>
                        <li><del>￥119</del>98.9起</li>
                        <li>返50元酒店券</li>
                        <li><button>预定</button></li>
                    </ul>
                </div>
            </div>
            <div class="play-more">
                <p>查看剩余一个报价<van-icon name="arrow-down" /></p>
            </div>
        </div>
        <div class="scenery-note">
            <div class="note-title">
                <p>游玩笔记</p>
                <p>看看别人怎么玩></p>
            </div>
            <div class="note-detail">
                <div class="note-break">
                    <div class="detail-top">
                        <img src="https://tr-osdcp.qunarzz.com/tr-osd-tr-space/img/691ba08ce28120e43d420dd73bb3dc2e.jpg_r_720x480x95_81384dfa.jpg" alt="">
                    </div>
                    <div class="detail-describe">
                        <p>重庆旅游|景点薅羊毛攻略，这些免费别错过!</p>
                    </div>
                    <div class="note-person">
                        <div class="person">
                            <div class="person-pic">
                                <img src="../assets/img/1664345067715.jpg" alt="">
                            </div>
                            <p>晚上不许做决定</p>
                        </div>
                        <div class="sight-number">
                            <van-icon name="eye-o" :size="8"/>
                            <p>1855</p>
                        </div>
                    </div>
                </div>
                <div class="note-break">
                    <div class="detail-top">
                        <img src="https://tr-osdcp.qunarzz.com/tr-osd-tr-space/img/691ba08ce28120e43d420dd73bb3dc2e.jpg_r_720x480x95_81384dfa.jpg" alt="">
                    </div>
                    <div class="detail-describe">
                        <p>重庆旅游|景点薅羊毛攻略，这些免费别错过!</p>
                    </div>
                    <div class="note-person">
                        <div class="person">
                            <div class="person-pic">
                                <img src="../assets/img/1664345067715.jpg" alt="">
                            </div>
                            <p>晚上不许做决定</p>
                        </div>
                        <div class="sight-number">
                            <van-icon name="eye-o" :size="8"/>
                            <p>1855</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="note-more">
                <p>全部48条笔记<van-icon name="arrow-down" /></p>
            </div>
        </div>
        <div class="scenery-remark">
            <div class="remark-title">
                <p>用户评论</p>
                <p>全部18503条评论></p>
            </div>
            <div class="remark-tip">
                <ul>
                    <li>景色不错 123</li>
                    <li>入园方便 734</li>
                    <li>少数民族风情 107</li>
                </ul>
            </div>
            <div class="remark-detail" v-for="item in 2" :key="item">
                <div class="detail-top">
                    <div class="person-message">
                        <div class="person-pic">
                            <img src="../assets/img/1664345067715.jpg" alt="">
                        </div>
                        <div class="person-name">
                            <p>晚上不许做决定</p>
                            <div class="grade">
                                <p>5分</p>
                                <div class="wjx">
                                    <van-icon v-for="item in 5" :key="item" name="star" color="#e08561"/>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                    <div class="remark-time">
                        <p>2022-10-03</p>
                    </div>
                </div>
                <div class="detail-content">
                    <p>
                        整体行程安排紧凑，体验很棒，服务很好，住宿也不错，总体超赞。沿途风光也很美。矮寨大桥着实震撼。导游小姐姐很热情周到，耐心讲解。除了此次行程景点介绍的很仔细，也给出很多凤凰及周边游玩的各种可参考项，值得推荐。
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.image{
    height: 200px;
    img{
        width: 100%;
        height: 100%;
    }
}
.scenery{
    background-color: #f4f4f4;
    overflow: hidden;
    .scenery-introduce{
        background-color: white;
        height: 150px;
        width: 95%;
        margin: 10px auto;
        border-radius: 8px;
        .scenery-title{
            display: flex;
            justify-content: space-between;
            p{
                margin: 4px 5px;
                font-weight: 700;
            }
        }
        .scenery-detail{
            margin-top: 10px;
            ul{
                display: flex;
                padding: 6px 5px;
                li{
                    font-size: 12px;
                }
                li:first-child{
                    width:36px;
                    color: #f29c9f;
                }
                li:nth-child(2){
                    flex:1;
                    margin-left: 10px;
                    text-overflow:ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    color: #a8a7a7;
                }
            }
        }
    }
    .scenery-tip{
        ul{
            display: flex;
            margin-left: 10px;
            li{
                font-size: 12px;
                background-color: white;
                border-radius: 4px;
                width: 55px;
                height: 20px;
                text-align: center;
                color: #a8a7a7;
            }
            li:nth-child(n+2){
                margin-left: 10px;
            }
        }
    }
    .scenery-play{
        background-color: white;
        width: 95%;
        margin: 10px auto;
        border-radius: 8px;
        height: 260px;
        .play-title{
            overflow: hidden;
            p{               
                margin: 4px 5px;
                font-weight: 700;
            }
        }
        .play-plan{
            display: flex;
            justify-content: space-between;
            border-bottom: 1px dashed #c6c5c5;
            margin: 10px 0;
            .plan-left{
                margin: 4px 5px;
                ul{
                    li{
                        font-size: 12px;
                        padding: 0 4px;
                        margin: 5px 0;
                        color: #a8a7a7;
                        a{
                            color: #fd7e4b;
                            font-weight: 700;
                        }
                    }
                    li:first-child{
                        border-left: 2px solid #f29c9f;
                        color: black;
                        font-size: 13px;
                        font-weight: 700;
                    }
                }
            }
            .plan-right{
                margin: 4px 5px;
                ul{
                    li{
                        font-size: 12px;
                        color: #fd7e4b;
                        button{
                            background: #fd7e4b;
                            color: white;
                            border: none;
                            border-radius: 12px;
                            width: 60px;
                            height: 25px;
                            margin: 5px 5px;
                        }
                    }
                    li:first-child{
                        del{
                            color: #a8a7a7;
                            font-size: 12px;
                            margin-right: 4px;
                        }
                        font-size: 14px;
                        font-weight: 700;
                    }
                    li:nth-child(2){
                        font-size: 10px;
                        text-align: center;
                    }
                }
            }
        }
        .play-more{
            p{
                font-size: 14px;
                color: #fd7e4b;
                font-weight: 700;
                text-align: center;
            }
        }
    }
    .scenery-note{
        width: 95%;
        height: 330px;
        background-color: white;
        margin: 0 auto;
        border-radius: 8px;
        .note-title{
            overflow: hidden;
            display: flex;
            justify-content: space-between  ;
            p{
                margin: 4px 5px;
                font-weight: 700;
            }
            p:last-child{
                font-size: 12px;
                color: #a8a7a7;
                line-height: 25px;
            }
        }
        .note-detail{
            display: flex;
            justify-content: space-between;
            margin-top: 4px;
            .note-break{
                margin: 4px 5px;
                width: 150px;
            }
            .detail-top{
                width: 150px;
                height: 150px;
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 8px;
                }
            }
            .detail-describe{
                width: 150px;
                p{
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-weight: 700;
                    font-size: 14px;
                    margin: 4px 0;
                }
            }
            .note-person{
                display: flex;
                justify-content: space-between;
                .person{
                    display: flex;
                    align-items: center;
                    height: 30px;
                    .person-pic{
                        width: 20px;
                        height: 20px;
                        img{
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                        }
                    }
                    p{
                        margin: 0 5px;
                        font-size: 8px;

                    }
                }
                .sight-number{
                    display: flex;
                    align-items: center;
                    p{
                        font-size: 8px;
                        color: #a8a7a7;
                    }
                }
            }
        }
        .note-more{
            p{
                font-size: 14px;
                color: #fd7e4b;
                font-weight: 700;
                text-align: center;
            }
        }
    }
    .scenery-remark{
        width: 95%;
        overflow: hidden;
        background: white;
        margin: 10px auto;
        height: 400px;
        border-radius: 8px;
        .remark-title{
            display: flex;
            justify-content: space-between;
            p{
                margin: 4px 5px;
                font-weight: 700;
            }
            p:last-child{
                font-size: 12px;
                color: #a8a7a7;
                font-weight: 600;
                line-height: 25px;
            }
        }
        .remark-tip{
            ul{
                display: flex;
                margin: 4px 5px;
                li{
                    font-size: 12px;
                    background-color: #f0edec;
                    border-radius: 4px;
                    width: 100px;
                    height: 20px;
                    text-align: center;
                    line-height: 20px;
                }
                li:nth-child(n+2){
                    margin-left: 10px;
                }
            }
        }
        .remark-detail{
            height: 120px;
            margin: 10px auto;
            .detail-top{
                display: flex;
                justify-content: space-between;
                height: 40px;
                .person-message{
                    display: flex;
                    align-items: center;
                    .person-pic{
                        width: 25px;
                        height: 25px;
                        margin: 0 10px;
                        img{
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                        }
                    }
                    .person-name{
                        font-size: 12px;
                        display: flex;
                        flex-direction: column;
                        p{
                            margin: 0;
                            font-weight: 700;
                        }
                        .grade{
                            display: flex;
                            .wjx{
                                padding: 0 5px;
                                height: 16.8px;
                                margin: auto;
                            }
                        }
                    }
                }
                .remark-time{
                    p{
                        font-size: 12px;
                        line-height: 50px;
                        margin: 0;
                        font-weight: 700;
                    }
                }
            }
            .detail-content{
                width: 330px;
                margin: 2px auto;
                border-bottom: 1px dashed #c6c5c5;
                p{
                    font-size: 12px;
                    font-weight: 700;
                    color: #807f7f;
                    margin: 0;
                    padding-bottom: 5px;
                    
                }
            }
        }
    }
    
}
</style>